<template>
  <back-dialog-base
    :title="title"
    :visible="visibleDialog"
    width="23rem"
    @onCommit="handleSubmit"
  >
    <template #content>
      <div class="content-warp">
        <div class="left-form">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <el-row gutter="">
              <!-- <el-col :span="12">
                <el-form-item label="工单编号:" prop="no">
                  <el-input
                    v-model="form.no"
                    placeholder="请输入…"
                  ></el-input> </el-form-item
              ></el-col> -->
              <!-- <el-col :span="12"></el-col> -->
            </el-row>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-form-item label="所属管廊：" prop="pipeInfoName">
                  <el-select
                    v-model="form.pipeInfoName"
                    clearable
                    placeholder="--请选择--"
                    @change="changeSele"
                  >
                    <el-option
                      v-for="item in pipeNameDrop"
                      :key="item.id"
                      :label="item.pipeName"
                      :value="item.id"
                    />
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="11">
                <el-form-item label="所属仓室：" prop="warehouseName">
                  <el-select
                    v-model="form.warehouseName"
                    clearable
                    placeholder="--请选择--"
                    @change="changeSele2"
                  >
                    <el-option
                      v-for="item in warehouseIddrop"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select> </el-form-item
              ></el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-form-item label="防火分区：" prop="subregionName">
                  <el-select
                    v-model="form.subregionName"
                    clearable
                    placeholder="--请选择--"
                    @change="changeSele3"
                  >
                    <el-option
                      v-for="item in subregionIdrop"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="13">
                <el-form-item label="所属单位：" prop="unit">
                  <el-input
                    v-model="form.unit"
                    placeholder="请输入…"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-form-item label="工单类型：" prop="type">
                  <el-select
                    @change="changeSele4"
                    v-model="form.type"
                    clearable
                    placeholder="--请选择--"
                  >
                    <el-option
                      v-for="item in worktypeDrop"
                      :key="item.code"
                      :label="item.value"
                      :value="item.code"
                    />
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="13">
                <el-form-item label="负责人：" prop="principal">
                  <el-input
                    v-model="form.principal"
                    placeholder="请输入…"
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-form-item label="处理结果：" prop="result">
                  <el-input
                    v-model="form.result"
                    placeholder="请输入…"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="13"
                ><el-form-item label="工单描述：" prop="remark">
                  <el-input
                    v-model="form.remark"
                    placeholder="请输入…"
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-form-item label="开始时间：" prop="startTime">
                  <el-date-picker
                    v-model="form.startTime"
                    type="datetime"
                    placeholder="--请选择--"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="结束时间：" prop="endTime">
                  <el-date-picker
                    v-model="form.endTime"
                    type="datetime"
                    placeholder="--请选择--"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  /> </el-form-item
              ></el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import {
  reactive,
  defineProps,
  ref,
  defineEmits,
  watch,
  onMounted,
  nextTick,
  defineExpose
} from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import {
  workorderSave,
  commonsubregionIdDrop,
  commonwarehouseIdDrop,
  commonPipeNameDrop,
  commonworktyprDrop
} from '@/api/back'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})
const subregionIdrop = ref([]) //防火区域下拉列表
const warehouseIddrop = ref([]) //所属仓库下拉列表
const pipeNameDrop = ref([]) //所属管廊下拉列表
const worktypeDrop = ref([]) //工单类型下拉列表
const formRef = ref(null)
const emits = defineEmits(['onReload'])
const form = reactive({
  endTime: '', //结束时间
  id: '', //主键ID
  isDeteled: '', //删除标记位
  no: '', //工单编号
  pipeInfoName: '', //所属管廊
  pipeId: '', //所属管廊ID
  principal: '', //负责人
  remark: '', //工单描述
  result: '', //处理结果
  startTime: '', //开始时间
  subregionId: '', //防火分区ID
  subregionName: '', //防火分区
  type: '', //工单类型
  unit: '', //所属单位
  warehouseId: '', //所属仓库ID
  warehouseName: '' //所属仓库
})
const changeSele = (options) => {
  form.pipeId = options
}
const changeSele2 = (options) => {
  form.warehouseId = options
}
const changeSele3 = (options) => {
  form.subregionId = options
}
const changeSele4 = (options) => {}
// const close = () => {
//   formRef.value.resetFields()
// }
// const closeDlog = () => {
//   // formRef.value.resetFields()
//   clearForm()
//   emits('onCloes')
// }
//防火分区
const GetpisubregionIdDrop = () => {
  commonsubregionIdDrop().then((res) => {
    let data = res

    subregionIdrop.value = [...data]
  })
}
//所属仓库下拉
const GetwarehouseIddrop = () => {
  commonwarehouseIdDrop().then((res) => {
    let data = res

    warehouseIddrop.value = [...data]
  })
}
//获取所属管廊下拉列表
const GetpipeNameDrop = () => {
  commonPipeNameDrop().then((res) => {
    let data = res
    pipeNameDrop.value = [...data]
  })
}
//工单类型下拉
const GetworkType = () => {
  commonworktyprDrop({
    code: '',
    type: 6
  }).then((res) => {
    let data = res
    worktypeDrop.value = [...data]
  })
}

onMounted(() => {
  GetworkType() //工单类型
  GetpisubregionIdDrop() //防火分区
  GetwarehouseIddrop() //所属仓库
  GetpipeNameDrop() //所属管廊
})
const save = async (data) => {
  const res = await workorderSave(data)
  if (res && res.id) {
    if (props.title === '编辑工单') {
      message({ type: 'success', message: '工单管理编辑成功!' })
    } else {
      message({ type: 'success', message: '工单管理新增成功!' })
    }

    clearForm()
    emits('onReload')
  }
}
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      save(Object.assign(props.rowData, form))
      // save(JSON.parse(JSON.stringify(props.rowData, form)))
      // save((props.rowData, form))
    } else {
      return false
    }
  })
}

const clearForm = () => {
  if (!formRef.value) return
  // formRef.value.resetFields()
  form.value = {
    endTime: '', //结束时间
    id: '', //主键ID
    isDeteled: '', //删除标记位
    no: '', //工单编号
    pipeInfoName: '', //所属管廊
    pipeId: '', //所属管廊ID
    principal: '', //负责人
    remark: '', //工单描述
    result: '', //处理结果
    startTime: '', //开始时间
    subregionId: '', //防火分区ID
    subregionName: '', //防火分区
    type: '', //工单类型
    unit: '', //所属单位
    warehouseId: '', //所属仓库ID
    warehouseName: '' //所属仓库
  }
}

watch(
  () => props.rowData,
  () => {
    console.log('props.rowData,', props.rowData)
    form.endTime = props.rowData.ticketsRegulateForm.endTime
    form.no = props.rowData.ticketsRegulateForm.no
    form.pipeInfoName = props.rowData.pipeInfoName
    form.principal = props.rowData.ticketsRegulateForm.principal
    form.remark = props.rowData.ticketsRegulateForm.remark
    form.result = props.rowData.ticketsRegulateForm.result
    form.startTime = props.rowData.ticketsRegulateForm.startTime
    form.subregionName = props.rowData.subregionName
    form.type = props.rowData.ticketsRegulateForm.type
    form.unit = props.rowData.ticketsRegulateForm.unit
    form.warehouseName = props.rowData.warehouseName
    form.id = props.rowData.ticketsRegulateForm.id
    pipeNameDrop.value.map((item, index) => {
      if (item.pipeName === props.rowData.pipeInfoName) {
        form.pipeId = pipeNameDrop.value[index].id
      }
    })
    warehouseIddrop.value.map((item, index) => {
      if (item.name === props.rowData.warehouseName) {
        form.warehouseId = warehouseIddrop.value[index].id
      }
    })
    subregionIdrop.value.map((item, index) => {
      if (item.name === props.rowData.subregionName) {
        form.subregionId = subregionIdrop.value[index].id
      }
    })

    worktypeDrop.value.map((item, index) => {
      if (item.value === props.rowData.ticketsRegulateForm.type) {
        form.type = worktypeDrop.value[index].code
      }
    })
  }
)
const cleara = () => {
  console.log('233333')
  formRef.value.clearValidate()
}
const morePont = () => {
  console.log('222222')
  GetworkType() //工单类型
  GetpisubregionIdDrop() //防火分区
  GetwarehouseIddrop() //所属仓库
  GetpipeNameDrop() //所属管廊
}
defineExpose({ cleara, morePont })
const rules = reactive({
  endTime: [
    {
      required: true,
      message: '结束时间不能为空',
      trigger: 'blur'
    }
  ],
  no: [
    {
      required: true,
      message: '工单编号不能为空',
      trigger: 'blur'
    }
  ],
  pipeInfoName: [
    {
      required: true,
      message: '所属管廊不能为空',
      trigger: 'change'
    }
  ],
  principal: [
    {
      required: true,
      message: '负责人不能为空',
      trigger: 'blur'
    }
  ],
  remark: [
    {
      required: true,
      message: '工单描述不能为空',
      trigger: 'blur'
    }
  ],
  result: [
    {
      required: true,
      message: '处理结果不能为空',
      trigger: 'blur'
    }
  ],
  startTime: [
    {
      required: true,
      message: '开始时间不能为空',
      trigger: 'blur'
    }
  ],
  subregionName: [
    {
      required: true,
      message: '防火分区不能为空',
      trigger: 'change'
    }
  ],
  type: [
    {
      required: true,
      message: '工单类型不能为空',
      trigger: 'blur'
    }
  ],
  unit: [
    {
      required: true,
      message: '所属单位不能为空',
      trigger: 'blur'
    }
  ],
  warehouseName: [
    {
      required: true,
      message: '所属仓库不能为空',
      trigger: 'change'
    }
  ]
})
</script>
<style lang="scss" scoped>
:deep(.el-input__inner) {
  width: 212px;
}
:deep(.dialog-footer) {
  padding-bottom: 50px;
}

.content-warp {
  width: 100%;
  height: 100%;
  display: flex;
  .left-form {
    flex: 4;
  }
}
</style>
